<template>
  <a-layout-sider class="side" breakpoint="xxl" collapsed-width="0" collapsible>
    <a-menu @click="toggleMenu" v-model:selectedKeys="current" mode="inline" :items="menuItems" />
  </a-layout-sider>
</template>
<script lang="ts" setup>
import { computed, h, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import {
  HomeOutlined,
  PlusOutlined, RobotFilled, SearchOutlined,
  TeamOutlined, UpCircleTwoTone,
  UserOutlined,
  WechatOutlined
} from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.ts'
import { SPACE_TYPE_ENUM } from '@/constants/space.ts'
import { listMyTeamSpaceUsingPost } from '@/api/spaceUserController.ts'

const userStore = useUserStore()

const originMenu = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '公共图库',
    title: '公共图库',
  },
  {
    key: '/picture/add',
    icon: () => h(HomeOutlined),
    label: '发布作品',
    title: '发布作品',
  },
  {
    key: '/user/chat/1',
    icon: () => h(WechatOutlined),
    label: '聊天大厅',
    title: '聊天大厅',
  },
  {
    key: '/picture/ai/painting',
    icon: () => h(RobotFilled),
    label: 'AI扩图',
    title: 'AI扩图',
  },
  {
    key: '/space/my',
    icon: () => h(UserOutlined),
    label: '我的私人空间',
    title: '我的私人空间',
  },
  {
    key: '/picture/like-search',
    icon: () => h(SearchOutlined),
    label: '搜索图片',
    title: '搜索图片',
  },
  {
    key: `/space/add?type=${SPACE_TYPE_ENUM.TEAM}`,
    icon: () => h(PlusOutlined),
    label: '创建团队空间',
    title: '创建团队空间',
  },
]

const router = useRouter()
// 切换菜单
const toggleMenu = ({ key }) => {
  console.log(key)
  router.push(key)
}
// 查询我加入的团队

const teamSpaceList = ref<API.SpaceUserVO[]>([])
const menuItems = computed(() => {
  // 没有团队空间，只展示固定菜单
  if (teamSpaceList.value.length < 1) {
    return filterMenus(originMenu)
  }
  // 展示团队空间分组
  const teamSpaceSubMenus = teamSpaceList.value.map((spaceUser) => {
    const space = spaceUser.spaceVO
    return {
      key: '/space/' + spaceUser.spaceId,
      label: space?.spaceName,
    }
  })
  const teamSpaceMenuGroup = {
    type: 'group',
    label: '我的团队',
    icon: () => h(TeamOutlined),
    key: 'teamSpace',
    children: teamSpaceSubMenus,
  }
  return filterMenus([...originMenu, teamSpaceMenuGroup])
})

// 加载团队空间列表
const fetchTeamSpaceList = async () => {
  const res = await listMyTeamSpaceUsingPost()
  if (res.data.code === 0 && res.data.data) {
    teamSpaceList.value = res.data.data
    //   页面刷新
  } else {
    message.error('加载我的团队空间失败，' + res.data.message)
  }
}

const filterMenus = (menus: any) => {
  return menus.filter((item) => {
    if (item.key != '/') {
      return userStore?.isLogin
    }
    return true
  })
}

const current = ref<string[]>([''])
// 路由切换
router.afterEach((to) => {
  current.value = [to.path]
})

onMounted(() => {
  fetchTeamSpaceList()
})
</script>

<style scoped lang="scss">
:deep(.ant-menu) {
  background-color: rgba(255, 255, 255, 0.8);
}

:deep(.ant-layout-sider-zero-width-trigger) {
  background-color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: unset;
  bottom: 0;
  left: 0;
}
</style>
